<!--# layout("/common/mallout.html"){ -->

<link rel="stylesheet" href="http://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/style/gallery.css">
<link rel="stylesheet" href="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop%2Fmall%2Fstyle%2Fproduct.css">
<script src="http://www.11ziyun.com/js/region.js"></script>
<style>
    .address_tab span{padding: 0px;}
    .section{overflow:inherit;}
</style>
<div class="section">
    <!------------------------------------>
    <div class="gallery-sortbar">
        <input type="hidden" value="${keywords}" id="keywords">
        <input type="hidden" id="orderValue" value="DESC" name="">
        <div class="sortbar">
            <span class="action-sort active" id="default">综合<i></i></span>
            <span class="action-sort" id="orderNum">销量<i></i></span>
            <em>
                <input type="checkbox"  id="self">
                <label class="gallery-showmode" for="self"><s></s>紫云自营</label>

            </em>
        </div>
        <div class="mini-pageview">
            <!--地址-->
            <span class="address_text" style="vertical-align: top;"><a>湖北 武汉市 江汉区</a><s></s>
                <div class="address_select">
                    <div class="address_tab">
                        <span class="atver"><i>湖北</i></span>
                        <span><i>武汉</i></span>
                        <span><i>江汉区</i></span>
                    </div>
                    <div style="display:none;">
                        <select class="address_op"></select>
                            <select class="address_op"></select>
                                <select class="address_op"></select>
                    </div>
                    <div class="address_con">

                    </div>
                    <div class="address_con">

                    </div>
                    <div class="address_con">

                    </div>
                </div>
            </span>

            <span class="page-action">

                <button class="h_right flip next ">></button>
                <button class="h_right flip prev"><</button>
                <span class="page-current">1</span>/<span class="page-total"></span>

              <!--<a href="javascript:void(0);" class="flip prev"><</a>-->
              <!--<i>-->
              	<!--<span class="page-count">-->
                <!--<span class="page-current">1</span>/<span class="page-total"></span>-->
                <!--</span>-->
              <!--</i>-->
              <!--<a href="javascript:void(0);" class="flip next">></a>-->
           </span>
        </div>
    </div>
    <!-----------------显示列表--------------------->
    <div class="gallery-show"> </div>
    <div align="center" class="pageFloot" id="demo7"></div>

        <script type="text/html" id="providerList">
            <div class="gallery-grid">
                <ul style="width:100%;">
                {{ if merchantList.length < 1}}
                    <li class="shop_mood_list">暂无工厂</li>
                    {{else}}
                    {{each merchantList as merchan}}
                    <li class="shop_mood_list">

                        <div class="s_m_img">
                            <a href="/mall/providerDetail.do?sellerId={{merchan['sellerId']}}" target="_blank">
                                {{if merchan['logoUrl'] == null }}
                                <img src="https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_02.png">
                                {{else}}
                                <img src="${imagepath}/{{merchan['logoUrl']}}?x-oss-process=image/resize,m_pad,h_200,w_200">
                                {{/if}}
                            </a>
                        </div>

                        <div class="s_m_text">
                            <h3>
                                <a href="/mall/providerDetail.do?sellerId={{merchan['sellerId']}}" target="_blank">{{merchan['doorheadName']}}</a>
                            </h3>
                            {{if merchan['orderNum'] != 0}}
                            <p>订单数: {{merchan['orderNum']}} 单</p>
                            {{/if}}
                            <p style="overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;"><strong>简介：{{merchan['brief']}}</strong></p>
                            <p><i class="ico_shop"></i><span style=" float:left; width:178px;">{{merchan['addr']}}</span></p>
                        </div>

                        <div class="s_m_shop">
                            {{ each merchan['goodsInfoList'] as goods}}
                            <div class="s_m_shop_img">
                                <p><a href="/mall/skuProductDetails.do?goodsId={{goods['goodsId']}}&goodsType={{goods['goodsType']}}" target="_blank">
                                    <img src="${imagepath}/{{goods['goodsImgUrls']}}?x-oss-process=image/resize,m_pad,h_200,w_200">
                                </a>
                                </p>
                                <p>{{goods['goodsName']}}</p>
                                <p class="s_m_shop_text">
                                    <span><strong class="price">￥<font>{{goods['popSinglePriceShow']}}</font></strong></span>
                                </p>
                            </div>

                            {{/each}}
                        </div>
                    </li>
                    {{/each}}
                    {{/if}}
                </ul>
            </div>
        </script>

    <!-------------------------------------->
</div>


<!--#} -->
<script>
    layui.use(['laypage'], function(){

    var merchantSearchParamDto = {};
    merchantSearchParamDto['keyword'] = $("input#keywords").val();

    doAjax("/mall/searchProvider.json","post",{"merchantSearchParamDto":JSON.stringify(merchantSearchParamDto)},function (ret) {

        if(ret.code != 1 || ret.data.merchantList.length == 0) {
            var goods = "<div style=\"height:320px; background:url('https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_06.png') center center no-repeat; text-align:center;  font-size:22px; color:rgb(208,208,208);overflow:hidden;\"><p style=\"margin-top:250px;\">暂无供应商</p></div>";
            $("div.gallery-show").html('');
            $("div.gallery-show").html(goods);
        }else{
            var html = template("providerList",ret.data);
            $(".gallery-show").html(html);
            $(".page-total").html(ret.data.totalPage);
            page(ret.data.totalRows,ret.data.curPage);
        }
    });

    $(document).ready(function(){

        //多选按钮
        $(".gallery-showmode").on("click",function(){
            $('.page-current').html(1);
            if($(this).hasClass("active"))
            {
                $(this).removeClass('active');
            }
            else
            {
                $(this).addClass('active');
            }
            sortGoods();
        })
        //绑定排序事件
        $('.action-sort').on('click', function(){
            if($(this).hasClass('active'))
            {
                $(this).removeClass('active');
                $("input#orderValue").val('ASC');
                $("input#orderValue").attr('name',$(this).attr('id'));
            }
            else
            {
                $(this).addClass('active').siblings().removeClass('active');
                $("input#orderValue").attr('name',$(this).attr('id'));
                $("input#orderValue").val('DESC');
            }

            var sortMethd =  $("input#orderValue").val();
            sortGoods(sortMethd);

        });
        //前一页
        $('.page-action').on('click', '.flip.prev',function(){

            var curPage = parseInt( $('.page-current').html() );
            var page = curPage-1;
            if(page<1){
                return;
            }

            $('.page-current').html( page );

            $('#page').val( page );
            sortGoods( $("input#orderValue").val()  );

        });

        //后一页
        $('.page-action').on('click', '.flip.next',function(){

            var curPage = parseInt( $('.page-current').html() );
            var totalPage = parseInt( $('.page-total').html() );

            var page = curPage + 1;
            if(page>totalPage){
                return;
            }

            $('.page-current').html( page );

            $('#page').val( page );
            sortGoods( $("input#orderValue").val()  );

        });

    });

    //搜索
    function sortGoods(){

        $(".gallery-showmode").each(function () {
            var name = $(this).attr('for');
            if($(this).hasClass("active")){
                merchantSearchParamDto[name] = true;
            }else{
                merchantSearchParamDto[name] = false;
            }
        });
        if($("input#orderValue").attr('name')){
        merchantSearchParamDto['sortCloumnName'] =  $("input#orderValue").attr('name');
        merchantSearchParamDto['sort'] =  $("input#orderValue").val();
        }

        merchantSearchParamDto['areaId'] = $(".input_addr").val();
        merchantSearchParamDto['pageNo'] = Number($('.page-current').html());

        doAjax("/mall/searchProvider.json","post",{"merchantSearchParamDto":JSON.stringify(merchantSearchParamDto)},function (ret) {

            if(ret.code != 1 || ret.data.merchantList.length == 0) {
                var goods = "<div style=\"height:320px; background:url('https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/pop/mall/image/pic_pop_06.png') center center no-repeat; text-align:center;  font-size:22px; color:rgb(208,208,208);overflow:hidden;\"><p style=\"margin-top:250px;\">暂无供应商</p></div>";
                $("div.gallery-show").html('');
                $("div.gallery-show").html(goods);
            }else{
                var html = template("providerList",ret.data);
                $(".gallery-show").html(html);
                $(".page-total").html(ret.data.totalPage);
                page(ret.data.totalRows,ret.data.curPage);
            }
        });

    }


    //地址
    $(".address_text").hover(function(){
        $(".address_select").show();
        if($(".address_tab span").index('.atver')!=-1)
        {
            $(".address_con").eq(0).show();
        }


    },function(){

        $(".address_select").hide();
        $(".address_con").hide().eq(1).show();
        $(".address_tab i").eq(2).text('请选择').hide();
        $(".address_tab span").removeClass('atver').eq(1).addClass('atver');
    })
    $(".address_tab span").each(function(i, o) {
        $(o).click(function(){
            $(o).addClass('atver').siblings().removeClass('atver');
            $(".address_con").hide().eq(i).show();
        })
    });
    $.select_add('address_op',region_Data,1323);//默认湖北武汉江汉区
    $(".address_con").each(function(i, o) {
        $(o).html($(".address_op").eq(i).html());
        $(o).find("option").each(function(index, element) {
            $(element).wrapAll(document.createElement("span"));
        });
        $(o).on('click','option',function(){
            $(".address_op").eq(i).val($(this).attr('value'))
            $(".address_tab span").eq(i).find('i').text($(this).text());
            var id=$(this).attr('value')
            add_div(region_Data,id,i);
        })
    });

    function add_div(jsonData,id,index)
    {
        getJsonLength=function(jsonData)
        {
            var jsonLength = 1;
            for(var item in jsonData){
                jsonLength++;
            }
            return jsonLength;

        };

        var len=getJsonLength(region_Data);

        if(index==0)
        {
            $(".address_con").eq(1).html('');
            $(".address_con").eq(2).html('');
            $(".address_tab i").eq(1).text('请选择');
            $(".address_tab i").eq(2).text('请选择').hide();
            //for(var i=1;i<len;i++)
            for ( i in jsonData)
            {
                if(jsonData[i]!=undefined && jsonData[i]['p_region_id']==id)
                {
                    $(".address_con").eq(1).append("<option value="+jsonData[i]["region_id"]+">"+jsonData[i]["local_name"]+"</option>");

                }
            }
            $(".address_con").eq(1).find("option").each(function(index, element) {
                $(element).wrapAll(document.createElement("span"));
            });
            $(".address_tab span").removeClass("atver").eq(1).addClass("atver");
            $(".address_con").hide().eq(1).show();

        }
        if(index==1)
        {
            $(".address_con").eq(2).html('');
            $(".address_tab i").eq(2).text('请选择').show();
            //for(var i=1;i<len;i++)
            for ( i in jsonData)
            {
                if(jsonData[i]!=undefined && jsonData[i]['p_region_id']==id)
                {
                    $(".address_con").eq(2).append("<option value="+jsonData[i]["region_id"]+">"+jsonData[i]["local_name"]+"</option>")

                }
            }
            $(".address_con").eq(2).find("option").each(function(index, element) {
                $(element).wrapAll(document.createElement("span"));
            });
            if($(".address_con").eq(2).text()=='')
            {
                $(".address_tab span").eq(2).hide().html('<i></i>');
                $(".address_text a").text($(".address_tab").text());
                $(".address_select").hide();
                $(".input_addr").val(id);
                $('.page-current').html(1);
                sortGoods()
            }
            else
            {
                $(".address_tab span").eq(2).show().html('<i>请选择</i>');

            }
            $(".address_tab span").removeClass("atver").eq(2).addClass("atver");
            $(".address_con").hide().eq(2).show();
        }
        if(index==2)
        {
            $(".address_text a").text($(".address_tab").text());
            $(".address_select").hide();
            $(".input_addr").val(id);
            $('.page-current').html(1);
            sortGoods()
        }
    }

        var laypage = layui.laypage;
        function page(count,curPage){
            laypage.render({
                elem: 'demo7'
                ,count:count,  //当前总页数 默认10
                limit:20,
                curr:curPage
                ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                ,jump: function(obj,first){
                    if(!first){//不是第一次 就调用
                        //分页请求
                        console.log(obj.curr);
                        $('.page-current').html(obj.curr)
                        sortGoods();
                    }
                }
            });
        }

    })

</script>
